<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
    <!-- <link rel="stylesheet" href="./css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/contact.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <img src="./img/Inner/banner.png" >
        <div class="juzhong">
            <!-- logo -->
            <div class="logo  wow fadeInUp" data-wow-delay="0ms">Webworld</div>

            <input type="checkbox" id="mobile" class="change" style="display: none;" />

            <label for="mobile">
                <span></span>
                <span></span>
                <span></span>
            </label>
            <!-- 导航 -->
            <nav class="menu ">
                <a href="./home.html" class=" wow fadeInUp"  data-wow-delay="100ms">Home</a>
                <a href="./Inner.html"  class="wow fadeInUp"  data-wow-delay="200ms">Portfolio</a>
                <a href="./contact.html"  class="wow fadeInUp"  data-wow-delay="300ms">Contact</a>
            </nav>

        </div>
        <div class="head-desc">
            <h1 class="wow fadeInUp"  data-wow-delay="400ms">Elegant Designs</h1>
            <p class=" wow fadeInUp"  data-wow-delay="500ms">Loram lipsum</p>
           
        </div>
        
    </header>
<div class="dingwei">
    <img src="./img/Contact/Contact-Page-.png"> 
    
</div>
    <div class="juzhong">
       
        <!-- 内容部分 -->
        <div class="content">

            <!-- 标题 -->
            <div class="info ">
                <span><hr color="#e1e1e1" size="1"></span>
                    <div class="img  wow fadeInUp"  data-wow-delay="100ms">
                        <img src="./img/Contact/info-logo.png">
                    </div>
                    
                <span><hr color="#e1e1e1" size="1"></span>
            </div>
            <h2 class="info-title  wow fadeInUp"  data-wow-delay="200ms">   Our  <span>contact info</span>  </h2>
            
            <!-- info 下的内容栏目 -->
            <div class="column">
                <div class="column-demo  wow fadeInUp"  data-wow-delay="100ms">
                    <div class="img">
                        <img src="./img/Contact/info-logo1.png" >
                    </div>
                    
                    <p>Address Details</p>

                    <ul>
                        <li>Address Line 1</li>  
                        <li>Street Details 2</li>
                        <li> More details 3</li>
                    </ul>
                </div>

                <div class="column-demo  wow fadeInUp"  data-wow-delay="200ms">
                    <div class="img">
                        <img src="./img/Contact/info-logo2.png" >
                    </div>
                    
                    <p>Telephone</p>

                    <ul>
                        <li>+xxx- xxxxx-xxxxx</li>  
                        <li>+xxx- xxxxx-xxxxx</li>
                        <li>+xxx- xxxxx-xxxxx</li>
                    </ul>
                </div>

                <div class="column-demo  wow fadeInUp"  data-wow-delay="300ms">
                    <div class="img">
                        <img src="./img/Contact/info-logo3.png" >
                    </div>
                    
                    <p>Working time</p>

                    <ul>
                        <li>Monday - Fri — 08:00 - 16:00</li>  
                        <li> Saturday — Closed</li>
                        <li> Sunday — Closed</li>
                    </ul>
                </div>

                <div class="column-demo  wow fadeInUp"  data-wow-delay="400ms">
                    <div class="img">
                        <img src="./img/Contact/info-logo4.png" >
                    </div>
                    
                    <p>Email Address</p>

                    <ul>
                        <li>info@yoursite.com</li>  
                        <li>support@yoursite.com</li>
                        <li>Admin@yoursite.com</li>
                    </ul>
                </div>
                
            </div>

            <!-- contact form 标题 -->
            <div class="info">
                <span><hr color="#e1e1e1" size="1"></span>
                <div class="img  wow fadeInUp"  data-wow-delay="100ms">
                    <img src="./img/Contact/info-send.png">
                </div>
                <span><hr color="#e1e1e1" size="1"></span>
            </div>
            <h2 class="info-title  wow fadeInUp"  data-wow-delay="200ms">contact<span> Form</span>  </h2>
       
            <form action="" class="send  wow fadeInUp"  data-wow-delay="300ms">
                <div class="row-one">
                    <div class="inp">
                        <input type="text" placeholder="Name">
                    </div>
                    <div class="inp">
                        <input type="text" placeholder="Email">
                    </div>
                </div>
                 
                <div class="textar">
                    <textarea name="message" placeholder="Your message" >
                        
                    </textarea>
                </div>
          
                <input type="button" value="SEND" class="btn">
                
            </form>
        </div>

    </div>    
    <!-- 底部 -->
    <div class="footer">
        <div class="juzhong">
            <div class="footer-content wow fadeInUp" data-wow-delay="100ms">
                <span class="webword">webword</span>
                <p>
                    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of  
                </p>
                
            </div>
    
            <div class="footer-content wow fadeInUp" data-wow-delay="200ms">
                <span>contact</span>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have</p>
                <ul>
                    <li>New Delhi</li>
                    <li>info@yourwebsite.com</li>
                    <li>890-09880-45590</li>
                </ul>
            </div>
    
            <div class="footer-content latest  wow fadeInUp" data-wow-delay="300ms">
                <span>latest&nbsp;tweets</span>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    <br>
                    <span class="aa">1 Hour Ago</span>
                </p>
                    
                <p>
                    Lorem Ipsum is simply dummy text of the printing
                    <br>
                    <span class="aa">1 Hour Ago</span>
                </p>
            
            </div>
    
            <div class="footer-content news  wow fadeInUp" data-wow-delay="400ms">
                <span>news&nbsp;letter</span>
                <p>Type your email address below and recive our daily news letter for free</p>
                <div class="go">
                    <input type="text" placeholder="Email Address">
                    <span>GO</span>
                </div>
            </div>

            
        </div>
        
    </div>

    <!-- 版权 -->
    <div class="copyright">
            <div class="juzhong">
                <p class="co-desc wow fadeInUp" data-wow-delay="100ms">© 2013 All rights reserved.  Theme by cssauthor.com</p>
                <div class="co-logo">
                    <img src="./img/Inner/111.png" class=" wow fadeInUp" data-wow-delay="200ms">
                    <img src="./img/Inner/222.png" class=" wow fadeInUp" data-wow-delay="300ms">
                    <img src="./img/Inner/333.png" class=" wow fadeInUp" data-wow-delay="400ms">
                </div>
            </div>
    </div>
</body>
</html>
<script src="./js/wow.min.js"></script>
<script>
    //初始化
    new WOW().init();
</script>